<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" tagdir="/WEB-INF/tags/form" %>
<primus:page title="商品信息">
    <jsp:attribute name="css">
        <style type="text/css">
            #table .operate {
                min-width: 80px;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $("#table").DataTable({
                    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "所有"]],
                    "columnDefs": [{"targets": [7], "orderable": false}],
                    "searching": false,
                    "order": [[0, "asc"]]
                });
            });
            $("body").on("click", ".geo-line", function () {
                var id = $(this).data("id");
            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    <a href="salesReturnListController/applySalesReturn">
                        申请退货
                    </a>
                </li>
                <li class="active">
                    商品信息
                </li>
            </ul>
        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter blue">
                                商品信息
                            </h3>

                            <div style="padding-left: 12px">
                                <button type="button" class="col-sm-1  btn-sm btn-primary" onclick="">
                                    申请退货
                                </button>
                            </div>


                            <div style="padding-bottom: 46px">
                                <button type="button" class="col-sm-1  btn-sm btn-primary" onclick="">
                                    全部退货
                                </button>
                            </div>

                                <%--商品信息头部--%>
                            <div class="col-xs-12">
                                <table id="merchandiseNews-table" class="table  table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <%--这里是商品信息第一排文字 商品菜单--%>
                                        <%--多选框--%>
                                        <th class="center"> <label class="pos-rel"> <input type="checkbox" class="ace"> <span class="lbl"></span> </label></th>
                                        <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品编码</font></font></th>
                                        <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品名称</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品单位</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品规格</font></font></th>
                                    </tr>
                                    </thead>

                                    <%--这里面的是数据--%>
                                    <tbody>
                                    <tr class="">
                                       <%--数据多选框--%>
                                        <th class="center"> <label class="pos-rel"> <input type="checkbox" class="ace"> <span class="lbl"></span> </label></th>
                                        <%--商品编码--%>
                                        <td><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">123456</font></font></a></td>
                                        <%--商品名称--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">53度飞天茅台500ml</font></font></td>
                                        <%--商品单位--%>
                                        <td class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">EA</font></font></td>
                                        <%--商品规格--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                    </tr>

                                    <tr class="">
                                            <%--数据多选框--%>
                                        <th class="center"> <label class="pos-rel"> <input type="checkbox" class="ace"> <span class="lbl"></span> </label></th>
                                            <%--商品编码--%>
                                        <td><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">123456</font></font></a></td>
                                            <%--商品名称--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">53度飞天茅台500ml</font></font></td>
                                            <%--商品单位--%>
                                        <td class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">EA</font></font></td>
                                            <%--商品规格--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>

                                    </tr>

                                    </tbody>

                                </table>
                            </div>
                                <%--商品信息尾部--%>




                            <h3 class="header smaller lighter blue">
                                退货商品信息
                            </h3>
                            <%--退货商品信息头部--%>

                            <div class="col-xs-12">
                                <table id="returnInformation-table" class="table  table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品编码</font></font></th>
                                        <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品名称</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">发货数量</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">退货数量</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">商品单价</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">售后价格</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">小计</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">删除</font></font></th>

                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr class="">
                                        <%--商品编码--%>
                                        <td><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">123456</font></font></a></td>
                                        <%--商品名称--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">53度飞天茅台500ml</font></font></td>
                                        <%--发货数量--%>
                                        <td class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">EA</font></font></td>
                                        <%--退货数量--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                        <%--商品单价--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                        <%--售后价格--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input type="search" class="form-control input-sm" placeholder="" aria-controls="dynamic-table"></font></font></td>
                                        <%--小计--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                        <%--删除--%>
                                            <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><button class="btn btn-xs btn-danger"><i class="ace-icon fa fa-trash-o bigger-130"></i></button></font></font></td>
                                    </tr>


                                    <tr class="">
                                            <%--商品编码--%>
                                        <td><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">123456</font></font></a></td>
                                            <%--商品名称--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">53度飞天茅台500ml</font></font></td>
                                            <%--发货数量--%>
                                        <td class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">EA</font></font></td>
                                            <%--退货数量--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                            <%--商品单价--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                            <%--售后价格--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input type="search" class="form-control input-sm" placeholder="" aria-controls="dynamic-table"></font></font></td>
                                            <%--小计--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">100.00</font></font></td>
                                            <%--删除--%>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><button class="btn btn-xs btn-danger"><i class="ace-icon fa fa-trash-o bigger-130"></i></button></font></font></td>

                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <%--退货商品信息尾部--%>
                            <table width="453">
                              <tr>
                                <td width="197"><p>退货总金额：¥123.00</p>
                                </td>
                                <td width="268"><p style="padding-left: 80px">订单已支付金额：¥123.00</p>
                                </td>
                              </tr>
                              <tr>
                                <td>原订单金额：¥123.00</td>
                                <td><span style="padding-left: 80px">订单优惠金额：¥123.00</span></td>
                              </tr>
                          </table>

                            <div style="width:1620px; border:0.5px solid #9dbdd6;"></div>


                            <h3 class="header smaller lighter blue">
                                退货信息
                            </h3>



                            <div class="row">
                                <div class="col-sm-4">
                                    <label class="col-sm-4 control-label no-padding-right">退货理由:</label>
                                    <select>
                                        <option>拍错了</option>
                                        <option>不想要了</option>
                                    </select>
                                </div>
                            </div>

                            <br>
                            <br>
                            <div class="row">
                                 <div class="col-sm-4">
                                <label class="col-sm-4 control-label no-padding-right">退货说明:</label>
                                <textarea class="col-xs-6 col-sm-6 con_inf_name" style="width: 1618px;height: 100px;resize:none"></textarea>
                                 </div>
                            </div>


                            <br>
                            <br>

                            <table width="453">
                                <tr>
                                    <td width="197"><p>发货门店：万达广场一号店</p>
                                    </td>
                                    </td>
                                </tr>
                                <tr>
                                    <td>退回门店：万达广场二号店</td>
                                </tr>
                            </table>


                            <div style="width:1620px; border:0.5px solid #9dbdd6;"></div>
                            <br>
                            <br>


                            <h3 class="header smaller lighter blue">
                                退款信息
                            </h3>



                            <table width="453">
                                <tr>
                                    <td width="197"><p>原订单支付方式：线上支付宝</p>
                                    </td>
                                </tr>
                            </table>

                            <div class="row">
                                <div class="col-sm-4">
                                    <label class="col-sm-4 control-label no-padding-right">退款方式：</label>
                                    <select>
                                        <option>原路返回</option>
                                        <option>转账到银行卡</option>
                                    </select>
                                </div>
                            </div>

                            <br>
                            <table width="313" border="0" align="center" cellpadding="0" cellspacing="0">
                              <tr>
                                <td width="145"><button id="loading-btn" type="button" class="btn btn-success" data-loading-text="Loading..." onclick="cancelRefund()"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">取消退货</font></font></button>
                                </td>
                                <td width="168"><button type="button" class="btn btn-primary" data-toggle="button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">确认退货</font></font></button></td>
                              </tr>
                            </table>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>

        <script type="text/javascript">

            /**
             * 取消退货
             */
       function cancelRefund() {
            window.location.href="salesReturnListController.do"
       }

        </script>

        <script>
            var row,    // 详情数据
                index;  // 行索引

            $(function () {

                GetRequest();

                $("#showTable").hide();     //选择下拉框

                $(".tabe2").hide();         //隐藏拆单列表,仓库列表

                tableSinComInf();           //初始化派单信息列表

                $('#table_sin_com_inf tbody').on('click', 'tr', function () {
                    index = this._DT_RowIndex;
                    if ($(this).hasClass('selected')) {
                        $(this).css({'background-color': '#f9f9f9'})
                        $(this).removeClass('selected');
                    } else {
                        $("#table_sin_com_inf").dataTable().$('tr.selected').css({'background-color': '#f9f9f9'})
                        $("#table_sin_com_inf").dataTable().$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                        $(this).css({'background-color': '#00c0ef'})
                    }
                });

//                '省'层级数据
                $.ajax({
                    url: "/dispatch/level2",
                    dataType: "JSON",
                    data: {
                        "level": 0
                    },
                    success: function (resut) {
                        console.log(resut);
                    }
                });

            });

            // 关闭按钮(跳转派单列表页面)
            $("#closeButton").on("click", function () {
                window.location.href = "/salesReturnListController.do";
            });

            // 添加地址按钮(展示拆单列表,仓库列表)
            $("#showAddresButton").on("click", function () {
                $("#showTable").show();
            });

            // 拆单按钮(展示拆单列表)
            $("#separateBillButton").on("click", function () {
                $(".tabe1").show();
            });

            // 更改按钮(仓库列表)
            function alterButton() {
                $(".tabe3").show();
            }

            // 获取session 存储的值
            function GetRequest() {
                var vc = sessionStorage.getItem('sendOperation'); // => 返回testKey对应的值
                row = JSON.parse(vc)
                console.log(vc);
                con_inf_value(row.consignee);
            }

            // 获取商品派单信息列表
            function tableSinComInf() {
                var obj = tableSinComInfCov();
                var table = $("#table_sin_com_inf").dataTable({
                    searching: false,
                    ordering: false,
                    paging: false, // 禁止分页
                    bDestory: true,
                    bRetrieve: true,
                    data: obj,
                });
            }

            // 商品派单信息 封装
            function tableSinComInfCov() {
                var arr = [];
                var ty = [];

                arr.push(row.code);
                arr.push(row.orderSource);
                arr.push(row.posNo);
                arr.push(row.amount + '&nbsp;&nbsp;&nbsp;' + '<button class=\'btn btn-xs btn-pink\' onclick=\'addLine()\'>十</button>');
                arr.push(row.posNo);
                arr.push("<button class=\"btn btn-xs btn-pink\" onclick='alterButton()'>更改</button>");
                ty.push(arr);
                return ty;
            }

            var ji = 0;
            // 商品派单信息列表添加行
            function addLine() {
                var dt = $("#table_sin_com_inf").dataTable();
                var num = dt.api().rows().count();    // 行号
                ji++;
                var arr = [];
                arr.push(ji);
                arr.push(row.orderSource);
                arr.push(row.posNo);
                arr.push(row.amount + '&nbsp;&nbsp;&nbsp;' + '<button class=\'btn btn-xs btn-pink\' onclick=\'addLine()\'>十</button>' + '&nbsp;&nbsp;&nbsp;' + '<button class=\'btn btn-xs btn-pink\' onclick=\'cutLine(' + num + ')\'>一</button>');
                arr.push(row.posNo);
                arr.push("<button class=\"btn btn-xs btn-pink\" onclick='alterButton()'>更改</button>");
                dt.api().row.add(arr).draw();

            }

            // 删除行
            function cutLine(num) {
                var dt = $("#table_sin_com_inf").dataTable().api();
                if (num != 0) {
                    if (index == num) {
                        dt.row('.selected').remove().draw(false);
                    } else {
                        layer.msg("选中行与删除行不一致");
                    }
                }
            }

            // 收货人信息赋值
            function con_inf_value(consignee) {
                console.log(consignee)
                if (consignee != null) {
                    $("#seller").val(consignee.modifyRemark);
                    $(".con_inf_name").val(consignee.consigneeName);
//                    $(".con_inf_postcode").val(consignee.consigneeMobile); //暂缺 邮编
//                    $(".con_inf_email").val(consignee.consigneeMobile);    //暂缺 邮箱
                    $(".con_inf_tel").val(consignee.consigneeMobile);
                    $(".con_inf_address").html(consignee.address);
                }
            }

        </script>
    </jsp:body>
</primus:page>